<template>
  <div class="mod-config">





    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">

<el-collapse accordion>
  <el-collapse-item>
    <template slot="title"  class="label_font"  >
      <svg t="1630633498942" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2296" width="20" height="20"><title>点击展开查询条件</title><path d="M684.691107 434.776198 513.02433 604.484368 341.355505 434.776198c-11.850909-11.713786-31.06553-11.713786-42.916439 0-11.850909 11.716856-11.850909 30.711466 0 42.427298l193.126532 190.918237c11.850909 11.713786 31.06246 11.713786 42.916439 0l193.124486-190.918237c11.850909-11.716856 11.850909-30.711466 0-42.427298C715.756637 423.062412 696.540993 423.062412 684.691107 434.776198zM513.49812 63.075571c-246.687402 0-446.664969 199.980637-446.664969 446.664969S266.810718 956.405509 513.49812 956.405509c246.684332 0 446.664969-199.980637 446.664969-446.664969S760.182452 63.075571 513.49812 63.075571zM513.49812 900.5729c-215.851093 0-390.83236-174.981267-390.83236-390.83236S297.647027 118.90818 513.49812 118.90818s390.83236 174.981267 390.83236 390.83236S729.349213 900.5729 513.49812 900.5729z" p-id="2297" fill="#1296db"></path></svg>
    </template>

      <el-form-item>
        <el-input v-model="dataForm.servicecode" placeholder="业务标识码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.serviceno" placeholder="业务件号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.serviceno" placeholder="受理号" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.realtyno" placeholder="不动产登记证明号" clearable></el-input>
      </el-form-item>

      <el-form-item>
          <el-select v-model="dataForm.state" clearable placeholder="交易状态">
            <el-option
              v-for="item in options"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item>
          <el-select v-model="dataForm.btype" clearable placeholder="业务类型">
            <el-option
              :key="'7'"
              :label="'一般抵押公证委托'"
              :value="'7'">
            </el-option>
            <el-option
              :key="'9'"
              :label="'最高抵押公证委托'"
              :value="'9'">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item  prop="seRegion">
          <el-select  v-model="dataForm.seRegion" placeholder="城市" clearable >
              <el-option
                v-for="item in dataForm.seRegionList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
          </el-select>
        </el-form-item>

      <el-form-item>
        <el-input v-model="dataForm.zwr" placeholder="债务人" clearable></el-input>
      </el-form-item>

      <el-form-item>
              <el-select
                    v-model="dataForm.orgid"
                    clearable
                    filterable
                    style="width:425px;"
                    remote
                
                    placeholder="输入抵押权人代码或名称"
                    :remote-method="remoteMethod"
                    :loading="loading">
                    <el-option
                      v-for="item in list"
                      :key="item.branchid"
                      :label="item.branchname"
                      :value="item.branchid">
                    </el-option>
                  </el-select>
      </el-form-item>

      <el-form-item>
            <el-date-picker
              v-model="dataForm.sendtime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="发送开始时间"
              end-placeholder="发送结束时间"
              align="right">
            </el-date-picker>
      </el-form-item>

      <el-form-item>
            <el-date-picker
 @change="dateChangebirthday1"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"

              v-model="dataForm.updatetime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              align="right">
            </el-date-picker>
      </el-form-item>

      <el-form-item  prop="dyghbs">
          <el-select style="width:250px;"  v-model="dataForm.dyghbs" placeholder="带抵押过户标识" clearable >
              <el-option
                v-for="item in dataForm.dyghList"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
          </el-select>
        </el-form-item>



  </el-collapse-item>
</el-collapse>

      <el-form-item>
        <el-button type="primary"  @click="getDataList()">本地查询</el-button>
        <el-button type="primary" @click="export2Excel('table')">导出</el-button> 
        <el-button v-if="isAuth('bdc:bdcfirstregist:save')" type="primary" @click="firstDydj()"  >首次登记</el-button>

        <el-button v-if="isAuth('bdc:bdcmortgregist:info')" type="primary" @click="printCode()"  :disabled="dataListSelections.length <= 0" >批量打印条形码</el-button>
        <el-button v-if="isAuth('bdc:bdcmortgregist:info')" type="primary" @click="printCodePs()"   :disabled="dataListSelections.length <= 0" >批量打印品胜条形码(自助)</el-button>


      </el-form-item>
    </el-form>

<el-table
      :data="dataList"
      border
      id="table"
      style="width: 100%;display:none;">


      <el-table-column
        prop="servicecode"
        header-align="center"
        align="center"
        width="180px"
        label="业务标识码">
      </el-table-column>

      <el-table-column
        prop="serviceno"
        header-align="center"
        align="center"
        width="180px"
        label="业务件号">
      </el-table-column>

      <el-table-column
        prop="slh"
        header-align="center"
        align="center"
        width="180px"
        label="受理号">
      </el-table-column>

      <el-table-column
        prop="zwr"
        header-align="center"
        align="center"
        width="160px"
        label="债务人">
      </el-table-column>

      <el-table-column
        prop="btypeTranslate"
        header-align="center"
        align="center"
        width="160px"
        label="业务类型">
      </el-table-column>

      <el-table-column
        prop="bdbzqse"
        header-align="center"
        align="center"
        width="130px"
        label="被担保债权数额">
      </el-table-column>

      <el-table-column
        prop="seRegion"
        header-align="center"
        align="center"
        width="130px"
        label="城市">
      </el-table-column>

      <el-table-column
        prop="region"
        header-align="center"
        align="center"
        width="130px"
        label="区县">
      </el-table-column>

      <el-table-column
        prop="bld"
        header-align="center"
        align="center"
        width="130px"
        label="办理点">
      </el-table-column>

            <el-table-column
        prop="stateTranslate"
        header-align="center"
        align="center"
        width="160px"
        label="审核状态">
      </el-table-column>

      <el-table-column
        prop="sendtime"
        header-align="center"
        align="center"
        width="160px"
        label="发送登记中心时间">
      </el-table-column>

      <el-table-column
        prop="updatetime"
        header-align="center"
        align="center"
        width="160px"
        label="更新时间">
      </el-table-column>


      <el-table-column
        prop="realtyno"
        header-align="center"
        align="center"
        width="160px"
        label="不动产登记证明号">
      </el-table-column>


      <el-table-column
        prop="zwlxqssj"
        header-align="center"
        align="center"
        width="150px"
        label="债务履约起始时间">
      </el-table-column>
      <el-table-column
        prop="zwlxjssj"
        header-align="center"
        align="center"
        width="150px" 
        label="债务履约结束时间">
      </el-table-column>

      <el-table-column
        prop="isdygh"
        header-align="center"
        align="center"
         width="180px"
        label="带抵押过户标识">
      </el-table-column>

      <el-table-column
        prop="dyqrno"
        header-align="center"
        align="center"
         width="180px"
        label="抵押权人">
      </el-table-column>
      
    </el-table>

    <el-table
      :data="dataList"
      border
      ref="table"
      :height="tableHeight"
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        width="50">
      </el-table-column>

      <el-table-column
        prop="servicecode"
        header-align="center"
        align="center"
        width="180px"
        label="业务标识码">
      </el-table-column>

      <el-table-column
        prop="serviceno"
        header-align="center"
        align="center"
        width="180px"
        label="业务件号">
      </el-table-column>

      <el-table-column
        prop="slh"
        header-align="center"
        align="center"
        width="180px"
        label="受理号">
      </el-table-column>

      <el-table-column
        prop="zwr"
        header-align="center"
        align="center"
        width="160px"
        label="债务人">
      </el-table-column>

      <el-table-column
        prop="btypeTranslate"
        header-align="center"
        align="center"
        width="160px"
        label="业务类型">
      </el-table-column>

      <el-table-column
        prop="bdbzqse"
        header-align="center"
        align="center"
        width="130px"
        label="被担保债权数额">
      </el-table-column>

      <el-table-column
        prop="seRegion"
        header-align="center"
        align="center"
        width="130px"
        label="城市">
      </el-table-column>

      <el-table-column
        prop="region"
        header-align="center"
        align="center"
        width="130px"
        label="区县">
      </el-table-column>

      <el-table-column
        prop="bld"
        header-align="center"
        align="center"
        width="130px"
        label="办理点">
      </el-table-column>

            <el-table-column
        prop="stateTranslate"
        header-align="center"
        align="center"
        width="160px"
        label="审核状态">
      </el-table-column>

      <el-table-column
        prop="sendtime"
        header-align="center"
        align="center"
        width="160px"
        label="发送登记中心时间">
      </el-table-column>

      <el-table-column
        prop="updatetime"
        header-align="center"
        align="center"
        width="160px"
        label="更新时间">
      </el-table-column>


      <el-table-column
        prop="realtyno"
        header-align="center"
        align="center"
        width="160px"
        label="不动产登记证明号">
      </el-table-column>


      <el-table-column
        prop="zwlxqssj"
        header-align="center"
        align="center"
        width="150px"
        label="债务履约起始时间">
      </el-table-column>
      <el-table-column
        prop="zwlxjssj"
        header-align="center"
        align="center"
        width="150px" 
        label="债务履约结束时间">
      </el-table-column>

      <el-table-column
        prop="isdygh"
        header-align="center"
        align="center"
         width="180px"
        label="带抵押过户标识">
      </el-table-column>

      <el-table-column
        prop="dyqrno"
        header-align="center"
        align="center"
         width="180px"
        label="抵押权人">
      </el-table-column>



      <el-table-column
        fixed="left"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">

          <el-button type="text" v-if="(scope.row.state=='51'  || scope.row.state=='54') && isAuth('bdc:bdcfirstregist:upload')"  size="small"  
            @refreshDataList="getDataList"  @click="toUploadHandle(scope.row.seqno, scope.row.btype)">资料上传</el-button>

          <el-button type="text" v-if="scope.row.state=='52' && isAuth('bdc:bdcfirstregist:commit')"  size="small"  
            @refreshDataList="getDataList"  @click="toSubmitHandle(scope.row.seqno, scope.row.btype)">审核提交</el-button>

          <el-button type="text" v-if="(scope.row.state=='00' || scope.row.state=='53') && isAuth('bdc:bdcfirstregist:save')"  size="small"  
            @refreshDataList="getDataList"  @click="toCompleteHandle(scope.row.seqno, scope.row.btype)">完善登记</el-button>
          <el-button type="text" v-if="scope.row.state=='11' && isAuth('bdc:bdcfirstregist:save')" size="small"  
            @refreshDataList="getDataList"  @click="reSubmitHandle(scope.row.seqno, scope.row.btype)">重新提交</el-button>
          <el-button type="text" v-if="scope.row.state=='38' && isAuth('bdc:bdcfirstregist:upload')" size="small"    @refreshDataList="getDataList"  @click="uploadDysqs(scope.row.seqno)">上传抵押申请表</el-button>
          <el-button type="text" v-if="scope.row.isqmsqsset=='1'" size="small"    @refreshDataList="getDataList"  @click="downQmsqs(scope.row.seqno)">下载签名申请书</el-button>
          <el-button type="text" v-if="scope.row.state=='41'" size="small"    @refreshDataList="getDataList"  @click="imageCompleteHandle(scope.row.seqno, scope.row.btype)">影像材料补正登记</el-button>
          <el-button type="text" size="small"  @click="beforeprocview(scope.row.seqno)">查看进度</el-button>


          <el-button type="text" size="small" v-if="scope.row.state=='25'" 
             @click="certinfoHandle(scope.row.bdcno, scope.row.region, scope.row.servicecode, scope.row.serviceno, scope.row.realtyno)">电子证明查询</el-button>

          <el-button type="text" v-if="scope.row.slh" size="small"    @refreshDataList="getDataList"  @click="printCodePs(scope.row.seqno)">条形码(自助)</el-button> 
          <el-button type="text" size="small" @click="firstDetail(scope.row.seqno)">显示详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="datepicker.pageOptions"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->

    <first-register v-if="firstRegisterVisible" ref="firstRegister"   @refreshDataList="getDataList" ></first-register>    
    <upload-dysqs v-if="uploadDysqsVisible" ref="uploadDysqs"   @refreshDataList="getDataList" ></upload-dysqs> 
    <procview v-if="procviewVisible" ref="procview"   @refreshDataList="getDataList" ></procview>
    <first-register-detail v-if="firstRegisterDetailVisible" ref="firstRegisterDetail"   @refreshDataList="getDataList" ></first-register-detail>   
     <print-bar-code v-if="printBarCodeVisible" ref="printBarCode"   @refreshDataList="getDataList" ></print-bar-code> 

    <bdc-cert-info  v-if="certinfoVisible" ref="bdcCertInfo" @refreshDataList="getDataList"></bdc-cert-info>


 
 
  </div>



</template>

<script>

  import FirstRegister from './bdc-first-register-update' 
  import UploadDysqs from './upload-dysqs' 
  import Procview from './bdcprocview' 
  import FirstRegisterDetail from './bdc-first-register-detail'
  import PrintBarCode from './bdc-printbarcode' 
  import { printPs}   from '@/assets/js/printbarcode.js' 
  import BdcCertInfo from './bdccertinfo-add-or-update'

  export default {
    data () {
     
      return {
        pickerOptions: this.datepicker.rangeOptions,
        options: [],
        loading: false,
        dataForm: {
          state: '',
          realtyno: '',
          servicecode: '',
          serviceno: '',
  
          seRegionList: '',
          seRegion: '',
          sendtime: [],
          updatetime: [],
          btype: '',
          zwr: '',

          orgid: '',

          dyghbs: '',
          dyghList: []
        },
        tableHeight: 300,
        topHeight: 188,
        dataList: [],
        list: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        firstRegisterVisible: false,
        uploadDysqsVisible: false,
        procviewVisible: false,
        firstRegisterDetailVisible: false,
        printBarCodeVisible: false,
        certinfoVisible: false
      }
    },
    components: {
      FirstRegister,
      UploadDysqs,
      Procview,
      FirstRegisterDetail,
      PrintBarCode,
      BdcCertInfo
    },
    activated () {
      this.getDataList()
      this.initOptions()
    },
    mounted () {
      this.resetTableHeight()
    },
    methods: {

      dateChangebirthday1(val) {
          console.log(val);
29     }
      ,
      remoteMethod(query) {

          this.loading = true;

          this.$http({
            url: this.$http.adornUrl(`/sys/user/branch/search`),
            method: 'get',
            params: this.$http.adornParams({
              "key": query || ''
            })
          }).then(({data}) => {
            this.loading = false;
            if (data && data.code === 0) {
                this.list = data.list;
            }
          })     
          

      },

      export2Excel(id){
          this.datepicker.export2Excel(id, this, '首次登记.xlsx')
      },
      initOptions(){
          this.remoteMethod()

          this.$http({
            url: this.$http.adornUrl(`/bdc/bdcstateinfo/item/list`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.options = data.list
            this.dataForm.seRegionList = data.regionList

            this.dataForm.dyghList = data.dyghList
          })
      },

            // 新增 / 修改
      certinfoHandle (bdcno, region, servicecode, serviceno, realtyno) {
        this.certinfoVisible = true
        this.$nextTick(() => {
          this.$refs.bdcCertInfo.init(-1, bdcno, region, servicecode)
        })
      },

      downQmsqs(id){
          var token = this.$cookie.get('token')
      　　var url = this.$http.adornUrl('/bdc/bdcfirstregist/down/' + id + '?token=' + token)
          window.location.href = url
      },

        checkBeforePrint(){
          for (var i = 0; i < this.dataListSelections.length; i++){
            var data = this.dataListSelections[i]
            if (!data.slh){
              return false
            }
          }
          return true
        },
        printCode(){
            if (!this.checkBeforePrint()){
              this.$message.error("只能打印有受理号的记录")
              return
            }

            var ids = this.dataListSelections.map(item => {
              return item.seqno
            })
            if (ids.length == 0){
              this.$message.error("请勾选待打印数据")
              return ;
            }
            this.printBarCodeVisible = true
            this.$nextTick(() => {
              this.$refs.printBarCode.init(ids)
            })
        },

        printCodePs(id){

          if (!this.checkBeforePrint()){
              this.$message.error("只能打印有受理号的记录")
              return
            }

          var ids = id ? [id] : this.dataListSelections.map(item => {
            return item.seqno
          })

          if (ids.length == 0){
            this.$message.error("请勾选待打印数据")
            return ;
          }
                
          printPs(ids, this)
         
      },


      beforeprocview(id){
              this.$http({
                  url: this.$http.adornUrl(`/bdc/bdcprocview/procview/` + id),
                  method: 'get',
                  params: this.$http.adornParams()
                }).then(({data}) => {
                  if (data && data.code === 0) {

                      this.procviewHandle(data.seqno, data.btype, data.servicecode, data.zl, data.seRegion)

                  }
                  else{
                    this.$message.error(data.msg)
                  }
                }).catch(err => {
                 this.$message.error("系统内部错误")
                 console.error(err);            
              }); 
      },

      procviewHandle(seqno, btype, servicecode, zl, seRegion){
        this.procviewVisible = true
        this.$nextTick(() => {
          this.$refs.procview.init(seqno, btype, servicecode, zl, seRegion)
        })
      },

      resetTableHeight(){
        
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - this.topHeight;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - self.topHeight
            }
        })
      },

      firstDetail(id){
          this.firstRegisterDetailVisible = true
          this.$nextTick(() => {
            this.$refs.firstRegisterDetail.init(id)
          })
      },

      firstDydj(){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            this.$refs.firstRegister.init('', -1, '', 0)
          })
      },

      uploadDysqs(id){
          this.uploadDysqsVisible = true
          this.$nextTick(() => {
            this.$refs.uploadDysqs.init(id)
          })
      },

      imageCompleteHandle(id, btype){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            this.$refs.firstRegister.init(id, 11, btype, 1)
          })
      },

      reSubmitHandle(id, btype){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            var application = btype == '6' || btype == '8' ? 1 : 0
            this.$refs.firstRegister.init(id, 2, btype, application)
          })
      },

      toCompleteHandle(id, btype){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            var application = btype == '6' || btype == '8' ? 1 : 0
            this.$refs.firstRegister.init(id, 1, btype, application)
          })
      },
      

      toSubmitHandle(id, btype){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            var application = btype == '6' || btype == '8' ? 1 : 0
            this.$refs.firstRegister.init(id, 52, btype, application)
          })
      },

      toUploadHandle(id, btype){
          this.firstRegisterVisible = true
          this.$nextTick(() => {
            var application = btype == '6' || btype == '8' ? 1 : 0
            this.$refs.firstRegister.init(id, 51, btype, application)
          })
      },

      // 获取数据列表
      getDataList () {
        var params = {
            'page': this.pageIndex,
            'limit': this.pageSize,
            'realtyno': this.dataForm.realtyno,
            'servicecode': this.dataForm.servicecode,
            'serviceno': this.dataForm.serviceno,
            'dyghbs': this.dataForm.dyghbs,
            'orgid': this.dataForm.orgid,
            'seRegion': this.dataForm.seRegion,
            'btype': this.dataForm.btype,
            'zwr': this.dataForm.zwr,
            'state': this.dataForm.state
        };
        if (this.dataForm.updatetime && this.dataForm.updatetime.length >= 2){
            params.updatetime1 = this.dataForm.updatetime[0]
            params.updatetime2 = this.dataForm.updatetime[1]
        }
        if (this.dataForm.sendtime && this.dataForm.sendtime.length >= 2){
            params.sendtime1 = this.dataForm.sendtime[0]
            params.sendtime2 = this.dataForm.sendtime[1]
        }


        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/bdc/bdcfirstregist/list'),
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      }

    }
  }
</script>
<style lang="scss">
body .el-table th.gutter{
    display: table-cell!important;

}
.el-input-number .el-input__inner{
  -webkit-appearance: none;
  padding-left: 50px;
  padding-right: 50px;
  text-align: left;
}
</style>